<template>
	<div>
		<div>
			<div class="phb">精品推荐</div>
			<van-row v-for="(item,i) in recommendedItems" :key="i" style="display: flex;align-items: center;margin-top: 1rem;">
				<van-col span="5" offset="1">
				<van-image :src="APIDomainName + item.pic" radius="2rem" width="100%" ></van-image>
				</van-col>
				<van-col span="6" offset="1">
					<div class="title">{{item.title}}</div>
					<div style="display: flex; width: 10rem; ">
						<div class="fl">{{item.details}}</div>
						<div class="fl" style="margin-left: 0.5rem;">{{item.twodetails}}</div>
					</div>
					<div style="display: flex; margin-top: 0.5rem;  color: #FF0000;font-size: 18px;">
						￥{{item.nowprice.toFixed(2)}}</div>
				</van-col>
				<van-col span="8" style="text-align: end;" offset="3">
					<van-button round color="#01CBE2" style="margin-right: 1rem;height: 2.5rem;" @click="onDetail(item.product_id)">查看详情</van-button>
				</van-col>
			</van-row>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'homeNow',
		props: {
			recommendedItems: Array,
		},
		methods: {
			onDetail(id) {
				this.$router.push({
					name: 'productDetail',
					params: {
						id
					},
				});
			},
		}
	}
</script>

<style>
	.phb {
		font-size: 24px;
		color: black;
		width: 40%;
		text-align: center;
		margin-left: -2rem;
		margin-top: 1rem;
		font-weight: bold;
	}

	.title {
		font-size: 20px;
		width: 100%;
		font-weight: bold;
	}

	.fl {
		background-color:#ccc;
		border-radius: 0.6rem;
		margin-top: 0.5rem;
		/* margin-left: 0.5rem; */
		text-align: center;
		color: #FFFFFF;
		padding: 0 0.5rem 0.2rem 0.5rem;
	}
</style>
